/**
 * @desc 首页菜单效果
 * @author hkd
 */
layui.use('element', function() {
	let $ = layui.jquery;
	let element = layui.element;
	
	$(".layui-tab-left").on("click", "li", function(event) {
		// 阻止默认行为
		event.preventDefault(); 
		
		// 获取要打开网页的href地址
		let href = $(this).find("a").attr("href") ;
		
		if (href === "" || href.startsWith("javascript:") || href == null) {
			// 提示功能正在研发中... 
			layer.alert('该功能正在积极研发中...', {icon: 5});
			return ;
		}
		
		// 如果单击的 关闭按钮、则不做任何操作 (可以在 layui-close 中阻止冒泡)
		//if (event.target.className === "layui-close") return false ;
		// 滚动tab
		scrollTab($(this)) ;
		
		$("#mainContent").attr("src", href);
		
		showActiveMenu($(this).find("a").text())
		
	})

	// 给左侧菜单功能绑定事件
	$(".layui-nav-tree").on("click", ".layui-nav-child > dd", function(event) {
		// 阻止默认行为
		event.preventDefault();

		// 获取 a 标签对应的 href 
		let tag = $(this).find("a");
		let href = tag.attr("href"); 
		
		if (href === "" || href.startsWith("javascript:") || href == null) {
			// 提示功能正在研发中... 
			layer.alert('该功能正在积极研发中...', {icon: 5});
			return ;
		}

		// 获取 对应的 tab 
		let tab = [...$(".layui-tab-left").find("li > a")].find(a => a.innerText === tag.text());

		if (tab === undefined) {
			// 在 layui-tab-left 中 生成 对应的 tab 
			let text = $(`<li class="layui-nav-item layui-hide-xs  layui-this"><a href="${href}">${tag.text()}</a><b class="layui-close"></b></li>`);
			// 移除所有的 layui-this 样式
			$(".layui-tab-left li").removeClass("layui-this")
			// 将 文本追加到 layui-tab-left
			text.appendTo(".layui-tab-left");
			element.render('nav') 
			// 滚动tab
			scrollTab(text) ;
		} else {
			// 移除所有的 layui-this 样式
			$(".layui-tab-left li").removeClass("layui-this")
		}
		$(tab).parent().addClass("layui-this");
		// 切换到对应的 tab 页面
		$("#mainContent").attr("src", href);

	})

	$(".layui-tab-left").on("click", ".layui-close", function(event){ 
		// 阻止事件冒泡行为 
		event.stopPropagation() ;
		// 获取当前要删除的元素
		let tag = $(this).parent();
		// 获取 当前 tab 的上一个 tab 
		let prev = tag.prevAll("li").get(0); 
		
		// 判断删除的元素是否是 当前显示的元素 
		if (tag.hasClass("layui-this")) {
			$(prev).addClass("layui-this");
			// 显示 上一个 tab 的内容
			$("#mainContent").attr("src", $(prev).find("a").attr("href"));
		}
		// 删除 当前元素
		$(this).parent().remove(); 
		
		// 将左侧菜单 选中 对应的 功能 
		let node = $(".layui-tab-left").find("li.layui-this a") ;
		let title = node.text(); 
		
		showActiveMenu(title)
		
	})
	
	
	function scrollTab(tag) {
		// 获取 当前 点击的元素的 距离父元素的距离
		let {left, top} = tag.position();
		// 设置滚动位置
		tag.parent().scrollLeft(left);
	}
	
	function showActiveMenu(title) {
		let leftMenus = $(".layui-nav-tree").find(".layui-nav-child > dd a") ;
		// 获取左侧节点
		let leftNode = [...leftMenus].find(a => a.innerText === title); 
		$(".layui-nav-tree").find(".layui-nav-child > dd").removeClass("layui-this") ;
		$(leftNode).parent().addClass("layui-this");
	}
});
